(function($) {

var div = document.createElement('div'),
  rposition = /([^ ]*) (.*)/;
  
if (div.style.backgroundPositionX !== '') {
$(['X', 'Y']).each(function( i, letter ) {
    var property = 'backgroundPosition'+letter,
      isX = letter == 'X';
    $.cssHooks[property] = {
      set: function( elem, value ) {
        var current = elem.style.backgroundPosition;
        elem.style.backgroundPosition = (isX? value + ' ' : '' ) + (current? current.match(rposition)[isX+1] : '0') + (isX? '' : ' ' + value);
      },
      get: function( elem, computed ) {
        var current = computed?
          $.css( elem, 'backgroundPosition' ):
          elem.style.backgroundPosition;
        return current.match(rposition)[!isX+1];
      }
    };
    $.fx.step[property] = function( fx ) {
      $.cssHooks[property].set( fx.elem, fx.now + fx.unit );
    }
  });
}
div = null;
})(jQuery);

$(document).ready(function(){
    $('#MapImg').css('background-position-x', -30);
    $('#MapImg').css('background-position-y', -30);

    $( "#MapImg" ).mousedown(function(event){
        var currentY = event.pageY;
        var currentX = event.pageX;
        $(this).mousemove(function(event){     
            mouseY = event.pageY - currentY;
            mouseX = event.pageX - currentX;
            mouseX = mouseX / 40;
            mouseY = mouseY / 40;
            maxWidth = $(this).width() - 1400;
            maxHeight = $(this).height() - 800;
        
            var myPos = $('#MapImg').css("background-position").split(" ")
            myPos[0] = parseInt(myPos[0].replace("px",""))
            myPos[1] = parseInt(myPos[1].replace("px",""))
            
            if(myPos[0] <= -30){
                $('#MapImg').css('background-position-x', "+=" + mouseX);
                $('.provinces').css('left', "+=" + mouseX*2)
            } else {
                $('#MapImg').css('background-position-x', -30);
                $('.provinces').css('left', 0);
            }
            
            if(myPos[0] >= maxWidth){
                $('#MapImg').css('background-position-x', "+=" + mouseX);
            } else {
                $('#MapImg').css('background-position-x', maxWidth);
            }
            
            if(myPos[1] <= -30){
                $('#MapImg').css('background-position-y', "+=" + mouseY);
                $('.provinces').css('top', "+=" + mouseY*2)
            } else {
                $('#MapImg').css('background-position-y', -30);
                $('.provinces').css('top', 0)
            }
            
            if(myPos[1] >= maxHeight){
                $('#MapImg').css('background-position-y', "+=" + mouseY);
            } else {
                $('#MapImg').css('background-position-y', maxHeight);
            }
            
            $('#y').html($('#MapImg').css('background-position-x'));
            $('#x').html($('#MapImg').css('background-position-y'));
        });
    });
    
    $( "#MapImg" ).mouseup(function(){
        $(this).unbind("mousemove");
    });
    $( "#MapImg" ).mouseleave(function(){
        $(this).unbind("mousemove");
    });
   
    
    var provinces = { 
        1: {
            name: 'Posemuckel',
            color: '#4c0000',
            top: 160,
            left: 160,
            points: [{
                x: 0,
                y: 200
              },{
                x: 100,
                y: 100 
              },{
                x: 300,
                y: 100 
              },{
                x: 400,
                y: 250 
              },{
                x: 400,
                y: 320 
              },{
                x: 300,
                y: 340 
              },{
                x: 300,
                y: 340 
              },{
                x: 100,
                y: 220 
            }]
        },
        2: {
            name: 'Buxtehude',
            color: 'blue',
            top: 340,
            left: 80,
            points: [{
                x: -20,
                y: 240
              },{
                x: 240,
                y: 320 
              },{
                x: 250,
                y: 400 
              },{
                x: 200,
                y: 500 
              },{
                x: 400,
                y: 520 
              },{
                x: 300,
                y: 540 
              },{
                x: 200,
                y: 540 
              },{
                x: 100,
                y: 420 
            }]
        },
        3: {
            name: 'Gesindelkirchen',
            color: 'green',
            top: 400,
            left: 270,
            points: [{
                x: 280,
                y: 350
              },{
                x: 412,
                y: 320 
              },{
                x: 403,
                y: 518 
              },{
                x: 205,
                y: 498 
            }]
        }
    };
    var windowWidth = $(this).width();
    var windowHeight = $(this).height();
    
    var stage = new Kinetic.Stage({
        container: 'province-layer',
        width: windowWidth,
        height: windowHeight
    }); 
    
    var layer = new Kinetic.Layer();
        
    for(var i in provinces){
        var name = provinces[i].name,
            points = provinces[i].points,
            color = provinces[i].color;
    
        var text = new Kinetic.Text({
              x: provinces[i].left,
              y: provinces[i].top,
              text: name,
              fontFamily: 'Calibri',
              fontSize: 20,
              fill: '#fff',
              align: 'center',
            });
    
//        $('#h1-'+name).css({
//            left: provinces[i].left,
//            top: provinces[i].top
//        });
        
        var Poly = new Kinetic.Blob({
            points: points,
            fill: color,
            tension: 0.1,
            id: name,
            stroke: color,
            strokeWidth: 1
        });
        
        Poly.setOpacity(0.4);
        
        Poly.on('mouseover', function(){
            document.body.style.cursor = "pointer";
            this.setOpacity(1);
            layer.draw();
        });
        Poly.on('mouseout', function(){
            document.body.style.cursor = "default";
            this.setOpacity(0.4);
            layer.draw();
        });
          
        layer.add(Poly);
        
        text.on('mouseover', function(){
            document.body.style.cursor = "pointer";
            var blobid = layer.get('#'+this.getText())[0];
            blobid.setOpacity(1);
            layer.draw();
        });
        
        text.on('mouseout', function(){
            document.body.style.cursor = "default";
            var blobid = layer.get('#'+this.getText())[0];
            blobid.setOpacity(0.4);
            layer.draw();
        });
        
        layer.add(text);
    }
    stage.add(layer);
});



